<template>
  <!-- 商品列表组件 -->
  <van-grid
    class="product-list"
    :column-num="2"
    :gutter="6"
    :center="false"
    :border="false"
  >
    <van-grid-item
      v-for="item in productListData"
      :key="item.id"
      :to="{
        name: 'product',
        params: {
          productId: item.id
        }
      }"
    >
      <!-- 商品图片 -->
      <!-- <van-image /> -->
      <van-image :src="item.image">
        <template #loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>

      <!-- 商品标题 -->
      <p class="title">
        {{ item.store_name }}
      </p>

      <!-- 商品价格 -->
      <p class="price">
        ￥{{ item.price }}
      </p>

      <!-- 商品销量 -->
      <p class="sales">
        已售{{ item.sales }}件
      </p>
    </van-grid-item>
  </van-grid>
</template>

<script setup>
// ------------------------------------------ 导入模块 -------------------------------------------------
// 导入 vue3 的 API
import { toRefs } from 'vue'

// 导入 vant 组件，按需引入
import {
  Grid as VanGrid,
  GridItem as VanGridItem,
  Image as VanImage,
  Loading as VanLoading
} from 'vant'

// ------------------------------------------------ 声明数据 ------------------------------------------------
// 接收父组件传递的数据
const props = defineProps({
  productListData: {
    type: Object,
    required: true
  }
})
// 1、productListData：商品列表数据
const { productListData } = toRefs(props)
</script>

<style lang="scss" scoped>
// 商品列表组件样式
.product-list {
  margin: 10px 0;

  // 每块商品区域的样式
  :deep(.van-grid-item__content) {
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0;
    border-radius: 10px;

    // 商品标题样式
    .title {
      padding: 5px 8px 0;
      font-size: 14px;
      // 设置超出两行显示省略号
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    // 商品价格样式
    .price {
      padding-left: 6px;
      color: #ee3e3e;
      font-size: 22px;
      font-weight: 700;
    }

    // 商品销量样式
    .sales {
      padding: 0 8px;
      color: #ccc;
      font-size: 14px;
    }
  }
}
</style>
